<template>
  <div class="xmss" @scroll="ydjz">
    <div class="root" v-if="xmsAll">
      <div class="lvbj">
        <div>
          <div>
            <div>
              <img
                src="https://static.epetbar.com/epet_wap_img/opgc/position.png"
                alt=""
              />
              <span>狗狗</span>
            </div>
            <a :href="xmsAll.searchObj.target.param">
              <div>
                <img src="../assets/sech.png" alt="" />
                <span>{{ xmsAll.searchObj.tip }}</span>
              </div>
            </a>
            <div>
              <img
                src="https://static.epetbar.com/epet_wap_img/opgc/xms_file.png"
                alt=""
              />
              <img
                src="https://static.epetbar.com/epet_wap_img/opgc/main_9.png"
                alt=""
              />
            </div>
          </div>
          <div>
            <div>
              <img
                src="https://static.epetbar.com/epet_wap_img/opgc/zms_avatar_dog.png"
                alt=""
              />
            </div>
            <div>
              <p>立即登录</p>
              <p>我们想要更懂你</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div v-for="(v, i) in aitgn_url" :key="i">
          <img :src="v" alt="" />
        </div>
      </div>
      <div class="shwy">
        <a :href="xmsAll.advs[0].target.param">
          <img :src="xmsAll.advs[0].img_url" alt="" />
        </a>
      </div>
      <div class="msnav">
        <span
          :class="{ maxs: ydType == v.param }"
          @click="ydTypefn(v.param)"
          v-for="v in xmsAll.column"
          :key="v.param"
          :id="v.param"
        >
          {{ v.name }}
        </span>
      </div>
      <xgread :ydPagNam="ydPagNams" :ydtype="ydType"></xgread>
      <buttomtab :selectNav="3" class="budnav"></buttomtab>
    </div>
  </div>
</template>

<script>
import buttomtab from "../components/buttomtab.vue";
import xgread from "../components/iechong/xgread.vue";
export default {
  name: "xiaoms",
  data() {
    return {
      xmsAll: null,
      aitgn_url: [
        "https://static.epetbar.com/epet_wap_img/opgc/xms_9.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_8.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_7.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_6.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_5.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_11.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_3.png",
        "https://static.epetbar.com/epet_wap_img/opgc/xms_4.png",
      ],
      isgun: null,
      ydPagNams: 1,
      ydType: 0,
    };
  },
  async created() {
    let xms = await this.axios(
      `https://mall.api.epet.com/v3/content/opgc/IndexV3.html?do=GetListNew&param=0&page=1&pet_id=0&version=564&pet_type=dog&system=wap&isWeb=1&distinct_id=17c48b9ca51e15-09749fd86246d3-5437971-250125-17c48b9ca52c43&debug_param=`
    );
    // console.log(xms.data.data);
    this.xmsAll = xms.data.data;
  },
  components: {
    buttomtab,
    xgread,
  },
  methods: {
    ydjz(e) {
      // console.log("滑动了");
      let sTop = e.target.scrollTop; // 已滚动高度;
      let totalHeight = e.target.scrollHeight; // 滚动内容的总高度；
      let cHeight = e.target.clientHeight; // 窗口高度；
      // console.log(sTop, totalHeight, cHeight);
      if (sTop + cHeight + 1 >= totalHeight) {
        clearTimeout(this.isgun);
        this.isgun = setTimeout(() => {
          // console.log("到底了");
          // console.log(this.ydPagNams);
          this.ydPagNams++;
        }, 500);
      }
    },
    ydTypefn(a) {
      console.log(a);
      this.ydType = a;
    },
  },
};
</script>

<style lang="less" scoped>
.budnav {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}
.maxs {
  font-size: 15px;
  font-weight: bold;
}
.xmss {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
}
.root {
  font-size: 0.24rem;
  background-color: rgb(245, 246, 247);
  .lvbj {
    width: 100%;
    height: 3.12rem;
    background: url(http://static.epetbar.com/epet_wap_img/opgc/xms_newbg.png);
    background-size: 100% 100%;
    > div:nth-child(1) {
      > div:nth-child(1) {
        display: flex;
        color: #fff;
        justify-content: space-around;
        padding-top: 0.2rem;
        > div:nth-child(1) {
          > img {
            width: 0.26rem;
            position: relative;
            top: 0.1rem;
            margin-right: 0.1rem;
          }
          > span {
            position: relative;
            top: 0.08rem;
            font-size: 0.28rem;
          }
        }
        > a:nth-child(2) {
          display: block;
          box-sizing: border-box;
          width: 4.46rem;
          height: 0.6rem;
          color: rgb(180, 180, 180);
          background-color: rgb(218, 235, 226);
          padding-top: 0.1rem;
          border-radius: 0.3rem;
          img {
            width: 0.3rem;
            margin: 0.06rem 0.1rem 0 0.1rem;
          }
          span {
            position: relative;
            top: -0.07rem;
          }
        }
        > div:nth-child(3) {
          > img {
            width: 0.48rem;
            height: 0.44rem;
            margin-right: 0.1rem;
          }
        }
      }
      > div:nth-child(2) {
        width: 6.1rem;
        height: 1.12rem;
        margin: 0.3rem auto 0;
        background-color: rgb(255, 255, 255);
        border-bottom: 1px solid rgba(212, 211, 211, 0.445);
        padding: 0.3rem;
        display: flex;
        border-radius: 0.2rem;

        > div {
          > img {
            width: 1.12rem;
          }
        }
        > div:nth-child(2) {
          margin-left: 0.2rem;
          position: relative;
          top: 0.2rem;
          > p {
            margin: 0;
          }
          > p:nth-child(1) {
            font-size: 0.3rem;
            font-weight: 700;
          }
        }
      }
    }
  }
  > div:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-top: 0.4rem;

    background-color: rgb(247, 250, 252);
    > div {
      width: 23%;
      text-align: center;
      margin-bottom: 0.2rem;
      > img {
        width: 1rem;
      }
    }
  }
  .shwy {
    width: 6.9rem;
    height: 2.2rem;
    margin: 0 auto 0.4rem;
    img {
      width: 100%;
      height: 2.2rem;
    }
  }
  .msnav {
    width: 100%;
    display: flex;
    justify-content: space-around;
    > span {
      line-height: 0.88rem;
    }
  }
}
</style>